<template>
  <div class="container">
    <!-- 1.0 热门城市 开始 -->
    <div class="hot_city">
      <Posttab />
    </div>
    <!-- 1.0 热门城市 结束 -->
    <!-- 2.0推荐攻略开始 -->
    <div class="recommend_strategy">
      <Postitem />
    </div>

    <!-- 2.0推荐攻略结束 -->
    <!-- 3.0返回首部开始 -->
    <div>
      <el-backtop ref="back_btn" :bottom="100" :visibility-height="500">
        <div
          style="{
                    height: 100%;
                    width: 100%;
                    box-shadow: 0 0 6px rgba(0,0,0, .12);
                    text-align: center;
                    line-height: 40px;
                    color: #1989fa;
                    border-radius: 50%;
                  }"
          @mouseover="back_top_active=true"
          @mouseleave="back_top_active=false"
        >
          <div
            v-if="back_top_active"
            style="width:100%;height:100%;font-size:10px;line-height: 20px;"
          >
            返回
            顶部
          </div>
          <div v-else>
            <i class="el-icon-caret-top" />
          </div>
        </div>
      </el-backtop>
    </div>
    <!-- 3.0返回首部结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      back_top_active: false,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  .hot_city {
    width: 240px;
    margin-right: 50px;
  }
  .recommend_strategy {
    width: 1000px;
  }
}
</style>